<template>
	<view class="bigout">
		<uni-section title="常跑路线" type="line" style="background-color: #F4F6FA; " titleFontSize="30rpx" />
		<view class="change" @click="changeroad()">
			<image src="../../../static/img/change.png" class="changeimg" />
			<view class="changetext">编辑</view>
		</view>
		<scroll-view scroll-y="true" class="scrollview">
			<view class="outup">
				<uni-card v-for="(item,index) in route" class="card">
					<view class="upview">
						<view class="begin">始发地位置</view>
						<view class="point">·····················</view>
						<view class="end">目的地位置</view>
					</view>
					<view class="downview">
						<view class="startplace">{{item.start}}</view>
						<view class="endplace">{{item.end}}</view>
					</view>
					<view class="deleteview" v-if="seen" @click="deleteroad(item.runId)">
						<uni-tag :inverted="true" text="删除线路" type="warning"  />
					</view>
				</uni-card>
				<br><br>
			</view>
		</scroll-view>
		<view class="example-body">
			<view class="tag-insert">
				已添加：<view style="display: inline-block; color: #363EDF;">{{quantity}}条</view>
			</view>
			<view class="tag-view">
				<button class="tag" type="primary" @click="inputDialogToggle">添加线路</button>
			</view>
		</view>
		<view>
			<!-- 输入框示例 -->
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" title="添加线路" @confirm="dialogInputConfirm">
					<uni-forms ref="baseForm">
						<uni-forms-item label="始发地" name="start" >
							<uni-easyinput placeholder="请输入始发地区域" v-model="insertRoute.start" />
						</uni-forms-item>
						<uni-forms-item label="目的地" name="end" >
							<uni-easyinput placeholder="请输入目的地区域" v-model="insertRoute.end" />
						</uni-forms-item>
					</uni-forms>
				</uni-popup-dialog>
			</uni-popup>
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				seen: false,
				route: {},
				quantity: "",
				insertRoute: {
					runId:"",
					userId:"",
					start: "",
					end: ""
				}
			}
		},
		created() {
			this.showRoutes()
			this.showNum()
		},
		methods: {
			async showNum() {
				const res = await uni.$http.get("192.168.9.30:8080/waybill/runCount")
				console.log(res.data.data1)
				this.quantity = res.data.data1
			},
			async showRoutes() {
				const res = await uni.$http.get("192.168.9.30:8080/waybill/selectRunRoute")
				console.log(res.data.data1)
				this.route = res.data.data1
			},
			changeroad() {
				this.seen = true
			},
			inputDialogToggle() {
				this.$refs.inputDialog.open()
			},
			async dialogInputConfirm() {
				 
				const res = await uni.$http.post("192.168.9.30:8080/waybill/addCity", this.insertRoute)
				if (res.data.code == 0) {
					uni.showLoading({
					})
					setTimeout(() => {
						uni.hideLoading()
						this.$refs.inputDialog.close()
						this.insertRoute.start=""
						this.insertRoute.end=""
						this.showRoutes()
						this.showNum()
					}, 1000)
					uni.$showSucc("添加线路成功")
				}
			},
			async deleteroad(runId) {
				const res = await uni.$http.get("192.168.9.30:8080/waybill/deleteRun/" + runId)
				console.log(res.data.code)
				if (res.data.code == 0) {
					uni.$showSucc("删除线路成功")
					this.seen = false
					this.showRoutes()
					this.showNum()
				}
			}
		}
	}
</script>

<style>
	.scrollview {
		width: 100%;
		height: 660px;
	}

	.deleteview {
		display: inline-block;
		float: left;
		margin-left: 40%;
		margin-top: -20rpx;
	}

	.bigout {
		margin: 0;
		padding: 0;
		background-color: #F4F6FA;
		margin: 0 auto;
	}

	.outup {
		height: 447px;
		margin-top: -25rpx;
	}

	.card {
		height: 90px;
	}

	.upview {
		line-height: 35px;
	}

	.begin {
		display: inline-block;
		color: #969696;
		font-size: 30rpx;
		margin-left: 8px;

	}

	.point {
		display: inline-block;
		color: #969696;
		font-size: 34rpx;
		margin-left: 15px;
	}

	.end {
		display: inline-block;
		color: #969696;
		font-size: 30rpx;
		margin-left: 15px;
	}

	.startplace {
		display: inline-block;
		font-size: 38rpx;
		font-weight: 500;
		color: #000;
		margin-left: 2%;
	}

	.endplace {
		display: inline-block;
		font-size: 38rpx;
		font-weight: 500;
		color: #000;
		margin-left: 59%;
	}

	.example-body {
		left: 0;
		right: 0;
		position: fixed;
		bottom: 90rpx;
		background-color: #fff;
		height: 75px;
	}

	.tag-insert {
		width: 200rpx;
		display: inline-block;
		margin-left: 80rpx;
		margin-top: 45rpx;
		font-size: 32rpx;
	}

	.tag-view {
		display: inline-block;
		float: right;
		margin-top: 25rpx;
		margin-right: 40rpx;
	}

	.tag {
		border-radius: 30px;
		width: 340rpx;
		background-color: #363EDF;
	}

	.change {
		float: right;
		margin-top: -60rpx;
		margin-right: 30rpx;
		width: 120rpx;
		display: flex;
		align-items: center;
	}

	.changeimg {
		width: 40rpx;
		height: 40rpx;
	}

	.changetext {
		display: inline-block;
		margin-left: 10rpx;
		color: #969696;
	}
</style>
